<template>
  <div class="complex-container" ref="listContainer">
    <!-- 列表页 L -->
    <div class="list-page">
      <div class="list-header">
        <h2>剧本列表C2</h2>
        <el-button type="primary" @click="showDialog">新增剧本</el-button>
      </div>
      
      <div class="list-content">
        <el-table :data="scriptList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="剧本名称" />
          <el-table-column prop="author" label="作者" />
          <el-table-column prop="category" label="分类" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button size="small" @click="viewScript(scope.row)">查看</el-button>
              <el-button size="small" type="danger" @click="deleteScript(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <!-- 弹出窗口 A -->
    <div v-if="dialogVisible" class="dialog-overlay" @click.self="closeDialog">
      <div class="dialog-container" :class="{ 'expanded': showPreview }" ref="dialogContainer">
        <!-- 预览区域 B -->
        <div v-show="showPreview" class="preview-container">
          <div class="preview-header">
            <h3>剧本预览</h3>
            <el-button type="text" @click="hidePreview">关闭预览</el-button>
          </div>
          <div class="preview-content">
            <div class="script-preview">
              <h4>{{ currentScript.title || '未命名剧本' }}</h4>
              <div class="script-preview-content">
                <p v-if="currentStep === 1">这是一个基础剧本预览，请在右侧完成基本信息填写。</p>
                <p v-else-if="currentStep === 2">这是一个包含角色设定的剧本预览，请在右侧完成角色设定。</p>
                <p v-else-if="currentStep === 3">这是一个完整剧本预览，包含情节和对话。</p>
                <div class="script-characters" v-if="currentStep >= 2">
                  <h5>角色列表</h5>
                  <ul>
                    <li v-for="(character, index) in currentScript.characters" :key="index">
                      {{ character.name }} - {{ character.description }}
                    </li>
                  </ul>
                </div>
                <div class="script-plot" v-if="currentStep === 3">
                  <h5>剧情概要</h5>
                  <p>{{ currentScript.plot || '剧情尚未完成' }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 步骤 C1 - 基本信息 -->
        <div v-show="currentStep === 1" class="edit-step step-container">
          <div class="edit-header">
            <h3>{{ editHeaders[currentStep - 1] }}</h3>
          </div>
          <div class="edit-content">
            <div class="form-group">
              <label>剧本名称</label>
              <el-input v-model="currentScript.title" placeholder="请输入剧本名称" />
            </div>
            <div class="form-group">
              <label>剧本分类</label>
              <el-select v-model="currentScript.category" placeholder="请选择分类" style="width: 100%">
                <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
              </el-select>
            </div>
            <div class="form-group">
              <label>剧本简介</label>
              <el-input v-model="currentScript.description" type="textarea" :rows="4" placeholder="请输入剧本简介" />
            </div>
            <div class="edit-actions">
              <el-button @click="showPreview = true">试用剧本</el-button>
              <el-button type="primary" @click="nextStep">下一步</el-button>
            </div>
          </div>
        </div>
        
        <!-- 步骤 C2 - 角色设定 -->
        <div v-show="currentStep === 2" class="edit-step step-container">
          <div class="edit-header">
            <h3>{{ editHeaders[currentStep - 1] }}</h3>
          </div>
          <div class="edit-content">
            <div class="character-list">
              <div v-for="(character, index) in currentScript.characters" :key="index" class="character-item">
                <div class="form-group">
                  <label>角色名称</label>
                  <el-input v-model="character.name" placeholder="请输入角色名称" />
                </div>
                <div class="form-group">
                  <label>角色描述</label>
                  <el-input v-model="character.description" type="textarea" :rows="2" placeholder="请输入角色描述" />
                </div>
                <el-button type="danger" size="small" @click="removeCharacter(index)" class="remove-btn">删除</el-button>
              </div>
              <el-button type="dashed" @click="addCharacter" class="add-character-btn">添加角色</el-button>
            </div>
            <div class="edit-actions">
              <el-button @click="showPreview = true">试用剧本</el-button>
              <el-button @click="prevStep">上一步</el-button>
              <el-button type="primary" @click="nextStep">下一步</el-button>
            </div>
          </div>
        </div>
        
        <!-- 步骤 C3 - 剧情设定 -->
        <div v-show="currentStep === 3" class="edit-step step-container">
          <div class="edit-header">
            <h3>{{ editHeaders[currentStep - 1] }}</h3>
          </div>
          <div class="edit-content">
            <div class="form-group">
              <label>剧情概要</label>
              <el-input v-model="currentScript.plot" type="textarea" :rows="6" placeholder="请输入剧情概要" />
            </div>
            <div class="form-group">
              <label>背景设定</label>
              <el-input v-model="currentScript.background" type="textarea" :rows="4" placeholder="请输入背景设定" />
            </div>
            <div class="edit-actions">
              <el-button @click="showPreview = true">试用剧本</el-button>
              <el-button @click="prevStep">上一步</el-button>
              <el-button type="primary" @click="saveScript">保存剧本</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 引用DOM元素
const listContainer = ref(null)
const dialogContainer = ref(null)

// 控制弹窗显示
const dialogVisible = ref(false)
const showPreview = ref(false)
const currentStep = ref(1)

// 步骤标题
const editHeaders = ['创建剧本 - 基本信息', '创建剧本 - 角色设定', '创建剧本 - 剧情设定']

// 分类选项
const categories = ['悬疑', '爱情', '科幻', '冒险', '历史', '喜剧', '恐怖']

// 当前编辑的剧本
const currentScript = reactive({
  id: '',
  title: '',
  author: '当前用户',
  category: '',
  description: '',
  characters: [],
  plot: '',
  background: '',
  createTime: ''
})

// 假数据 - 剧本列表
const scriptList = ref([
  {
    id: '001',
    title: '迷雾森林',
    author: '张三',
    category: '悬疑',
    createTime: '2023-10-15'
  },
  {
    id: '002',
    title: '星际旅行',
    author: '李四',
    category: '科幻',
    createTime: '2023-10-18'
  },
  {
    id: '003',
    title: '古城传说',
    author: '王五',
    category: '历史',
    createTime: '2023-10-20'
  },
  {
    id: '004',
    title: '爱的旋律',
    author: '赵六',
    category: '爱情',
    createTime: '2023-10-22'
  }
])

// 显示弹窗
const showDialog = () => {
  dialogVisible.value = true
  currentStep.value = 1
  showPreview.value = false
  
  // 重置当前剧本数据
  Object.assign(currentScript, {
    id: generateId(),
    title: '',
    author: '当前用户',
    category: '',
    description: '',
    characters: [],
    plot: '',
    background: '',
    createTime: new Date().toLocaleDateString()
  })
  
  // 确保弹窗正确居中
  nextTick(() => {
    adjustDialogSize()
  })
}

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false
}

// 下一步
const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++
  }
}

// 上一步
const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 显示预览
const hidePreview = () => {
  showPreview.value = false
}

// 添加角色
const addCharacter = () => {
  currentScript.characters.push({
    name: '',
    description: ''
  })
}

// 删除角色
const removeCharacter = (index) => {
  currentScript.characters.splice(index, 1)
}

// 保存剧本
const saveScript = () => {
  // 这里应该是保存到后端的逻辑
  // 现在使用假数据模拟
  const newScript = {
    id: currentScript.id,
    title: currentScript.title || '未命名剧本',
    author: currentScript.author,
    category: currentScript.category || '未分类',
    createTime: currentScript.createTime
  }
  
  scriptList.value.unshift(newScript)
  ElMessage.success('剧本保存成功！')
  closeDialog()
}

// 查看剧本
const viewScript = (script) => {
  ElMessage.info(`查看剧本: ${script.title}`)
}

// 删除剧本
const deleteScript = (script) => {
  const index = scriptList.value.findIndex(item => item.id === script.id)
  if (index !== -1) {
    scriptList.value.splice(index, 1)
    ElMessage.success('剧本删除成功！')
  }
}

// 生成随机ID
const generateId = () => {
  return Math.floor(Math.random() * 10000).toString().padStart(4, '0')
}

// 调整弹窗大小
const adjustDialogSize = () => {
  if (!listContainer.value || !dialogContainer.value) return
  
  const containerWidth = listContainer.value.clientWidth
  const containerHeight = listContainer.value.clientHeight
  
  // 弹窗宽高为容器的45%（原来是25%）
  const baseWidth = containerWidth * 0.45
  const baseHeight = containerHeight * 0.45
  
  // 设置弹窗大小
  dialogContainer.value.style.width = `${baseWidth}px`
  dialogContainer.value.style.height = `${baseHeight}px`
}

// 监听预览状态变化，调整弹窗宽度
watch(showPreview, (newVal) => {
  if (!dialogContainer.value) return
  
  if (newVal) {
    // 预览显示时，宽度变为B+C的宽度
    const baseWidth = listContainer.value.clientWidth * 0.45
    dialogContainer.value.style.width = `${baseWidth * 2}px` // B+C的宽度
  } else {
    // 预览隐藏时，恢复原宽度
    const baseWidth = listContainer.value.clientWidth * 0.45
    dialogContainer.value.style.width = `${baseWidth}px`
  }
})

// 监听窗口大小变化
onMounted(() => {
  window.addEventListener('resize', adjustDialogSize)
})

// 组件卸载时移除事件监听
const onUnmounted = () => {
  window.removeEventListener('resize', adjustDialogSize)
}
</script>

<style scoped>
.complex-container {
  width: 100%;
  height: 100%;
  min-height: 80vh;
  position: relative;
}

/* 列表页样式 */
.list-page {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.list-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-container {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 预览区域样式 */
.preview-container {
  width: 200px;
  height: 100%;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.preview-header {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.preview-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.script-preview {
  height: 100%;
}

.script-preview h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.script-preview-content {
  font-size: 14px;
  color: #606266;
}

.script-characters h5,
.script-plot h5 {
  margin-top: 15px;
  margin-bottom: 10px;
  color: #303133;
}

.script-characters ul {
  padding-left: 20px;
}

/* 步骤容器样式 */
.step-container {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.edit-header {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.edit-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.edit-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.edit-step {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
  width: 100%;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.edit-actions {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 角色列表样式 */
.character-list {
  margin-bottom: 20px;
  width: 100%;
}

.character-item {
  position: relative;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

.add-character-btn {
  width: 100%;
  border-style: dashed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dialog-container {
    flex-direction: column;
    width: 90% !important;
    height: 80% !important;
  }
  
  .preview-container,
  .step-container {
    width: 100% !important;
  }
  
  .preview-container {
    height: 40%;
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .step-container {
    height: 60%;
  }
}
</style> 